<template>
  <!-- <ElConfigProvider size="small" :z-index="3000"> -->
  <div class="layout">
    <header class="layout-top">顶部栏</header>
    <sider class="layout-sider">侧边栏</sider>
    <router-link to="/home">Home</router-link>|
    <router-link to="/user">User</router-link>|
    <router-link to="/role">Role</router-link>
    <main class="layout-content">
      <router-view></router-view>
    </main>
  </div>
  <!-- </ElConfigProvider> -->
</template>

<script setup lang="ts">
// import { ElConfigProvider } from "element-plus";
</script>

<style lang="scss" scoped>
// @import "@styles/reset.scss";
$--primary-color: skyblue;
$topHeight: 60px;
$siderWidth: 200px;

.layout {
  background-color: $--primary-color;
  height: 100%;
}
.layout {
  .layout-top {
    width: 100%;
    height: $topHeight;
    line-height: $topHeight;
    background-color: lemonchiffon;
    color: aquamarine;
    padding: 0 16px;
  }
  .layout-sider {
    width: $siderWidth;
    height: calc(100% - $topHeight);
    // position: fixed;
    top: $topHeight;
    left: 0;
    float: left;
    // background-color: lemonchiffon;
  }
  .layout-content {
    background-color: coral;
    // overflow: hidden;
    display: flex;
    align-items: flex-start;
    height: calc(100% - $topHeight);
  }
}
</style>
